import createG2 from 'g2-react';
import { Stat } from 'g2';
import React from 'react';
import ReactDOM from 'react-dom';
import ajax from '../../../../utils/ajax';

  const Chart = createG2(chart => {
      chart.facet({
        margin: 50,
        facetTitle: {
          colDimTitle: {
            title: null
          },
          colTitle: { 
            title: {
              fontSize: "18px",
              textAlign: 'center',
              fill: '#999'
            }
          }
        }
      }); 

      chart.legend({
        position: 'left',
        marker: 'square',
      });

      //给字段起个别名
      chart.col('subTitle',
        {alias: '活动预约信息:'}   
      );

      chart.coord('theta', {
        radius: 0.6,
        inner: 0.6  //设置环饼圈大小
      });

      chart.tooltip({
        title: null
      });
      
      chart.intervalStack().position(Stat.summary.percent('profit'))
        .color('subTitle')
        .label('..percent', {
          offset: -2
        })
        .style({
          lineWidth: 1
        });
      chart.render();      
    });


 const data=[];
 const paramData={};
/**
 * 环饼图组件
 */
class CycleChart extends React.Component {

  constructor(props) {
    super(props);
    this.initCycleData();
  }

  state = {
     width: 200,
     height: 450,
      plotCfg: {
        margin: [50,0, 90, 0],
      },
      forceFit: true, //自适应
      nowDay:new Date().format('yyyyMMdd'),//现在时间 
 };

  /**
   * 初始化数据
   */
  initCycleData(){
    var self = this;
    //const paramData={day:'20170503'};
    paramData.day=this.state.nowDay;
    const url = '/statistic/getMuseumActivityOneDayAppointmentInfo';
      ajax.post({
      url: url,
      async: false,//必须用同步请求，否则数据显示异常
      params:paramData,
      success: function (res) {
        if(!res.data.closeDay){//非闭馆
         for(var i=0;i<res.data.subStatistic.length;i++){
           var tmp={};
            tmp.title=res.data.title;
            tmp.subTitle=res.data.subStatistic[i].title;
            tmp.profit=(res.data.subStatistic[i].proportion);
            data.push(tmp);
          }
        }
      }
    })
  }

  render() {
    return (
            <Chart
              data={data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit}
             />
    );
  }
}
export default CycleChart;